<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form
        :inline="true"
        :model="goodsQuery"
        class="demo-form-inline"
        style="margin-top: 20px"
        size="large"
      >
        <el-form-item label="商品名称">
          <el-input
            v-model="goodsQuery.proname"
            placeholder="请输入商品名称"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="goodsQuery.category" placeholder="请选择分类">
            <el-option
              v-for="item in categories"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品品牌">
          <el-input
            v-model="goodsQuery.brand"
            placeholder="请输入商品品牌"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="clear">清空</el-button>&nbsp;
          <el-button type="primary" @click="getGoodsListData">搜索</el-button
          >&nbsp;
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 15px">
      <el-table :data="goodsList">
        <el-table-column
          label="序号"
          type="index"
          width="80px"
        ></el-table-column>
        <el-table-column label="图片">
          <template #default="{ row }">
            <el-image
              style="width: 100px; height: 80px"
              :src="row.img1"
              :preview-src-list="[row.img1]"
              preview-teleported
            />
          </template>
        </el-table-column>
        <el-table-column
          label="名称"
          prop="proname"
          width="180px"
        ></el-table-column>
        <el-table-column label="品牌" prop="brand"></el-table-column>
        <el-table-column
          label="分类"
          prop="category"
          :filters="[
            { text: '家电', value: '家电' },
            { text: '口红', value: '口红' },
            { text: '键盘', value: '键盘' }
          ]"
          :filter-method="filterHandler"
        ></el-table-column>
        <el-table-column
          label="原价"
          prop="originprice"
          sortable
        ></el-table-column>
        <el-table-column
          label="折扣"
          prop="discount"
          sortable
        ></el-table-column>
        <el-table-column label="销量" prop="sales" sortable></el-table-column>
        <el-table-column label="是否售卖">
          <template #default="{ row }">
            <!-- v-model双向数据绑定才能交互、单向数据绑定只能渲染，不能交互 -->
            <el-switch
              v-model="row.issale"
              :active-value="1"
              :inactive-value="0"
              @change="update(row.proid, 'issale', $event)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否秒杀">
          <template #default="{ row }">
            <!-- v-model双向数据绑定才能交互、单向数据绑定只能渲染，不能交互 -->
            <el-switch
              v-model="row.isseckill"
              :active-value="1"
              :inactive-value="0"
              @change="update(row.proid, 'isseckill', $event)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否推荐">
          <template #default="{ row }">
            <!-- v-model双向数据绑定才能交互、单向数据绑定只能渲染，不能交互 -->
            <el-switch
              v-model="row.isrecommend"
              :active-value="1"
              :inactive-value="0"
              @change="update(row.proid, 'isrecommend', $event)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" @click="preview(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="goodsQuery.page"
        v-model:page-size="goodsQuery.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="getGoodsListData"
        @current-change="getGoodsListData"
      />
      <!-- 新增、修改轮播图dialog -->
      <el-dialog v-model="dialogVisible" fullscreen title="商品详情" center>
        <div style="width: 1000px; margin: 0 auto">
          <!-- 轮播图 -->
          <el-carousel height="600px">
            <el-carousel-item
              v-for="item in goods.banners[0].split(',')"
              :key="item"
            >
              <img style="width: 100%" :src="item" />
            </el-carousel-item>
          </el-carousel>
          <h3>{{ goods.proname }}</h3>
          <h4>品牌：{{ goods.brand }}</h4>
          <h4>分类：{{ goods.category }}</h4>
          <h4>
            价格：<span style="color: red"
              >￥{{ priceFormat.format(goods.originprice) }}</span
            >
          </h4>
          <h4>销量：{{ goods.sales }}</h4>
          <h4>是否售卖：{{ goods.issale === 1 ? '是' : '否' }}</h4>
          <h4>是否秒杀：{{ goods.isseckill === 1 ? '是' : '否' }}</h4>
          <h4>是否推荐：{{ goods.isrecommend === 1 ? '是' : '否' }}</h4>
          <h4>{{ goods.desc }}</h4>
          <h4>图文详情：</h4>
          <!-- <div><el-image :src="goods.img1"></el-image></div>
          <div><el-image :src="goods.img2"></el-image></div>
          <div><el-image :src="goods.img3"></el-image></div>
          <div><el-image :src="goods.img4"></el-image></div> -->
          <div v-html="goods.imageTextDesc"></div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="GoodsList">
import { ref } from 'vue'
import type { GoodsQuery, Goods } from '@/types/goods'
import { getGoodsList, getCategories, updateFlag } from '@/api/goods'
import { ElMessage } from 'element-plus'
import type { TableColumnCtx } from 'element-plus'
import { usePriceFormat } from '@/hook'

const priceFormat = usePriceFormat()

const goodsQuery = ref({
  proname: '',
  category: '',
  brand: '',
  page: 1,
  pageSize: 10
} as GoodsQuery)

const categories = ref([] as string[])
const total = ref(0)
const goodsList = ref([] as Goods[])

const clear = () => {
  goodsQuery.value.proname = ''
  goodsQuery.value.category = ''
  goodsQuery.value.brand = ''

  getGoodsListData()
}

const getCategoriesData = async () => {
  const res = await getCategories()

  categories.value = res.data.data
}

const getGoodsListData = async () => {
  const res = await getGoodsList(goodsQuery.value)

  total.value = res.data.data.total
  goodsList.value = res.data.data.items
}

// 更新商品是否秒杀、是否售卖、是否推荐
const update = async (
  proid: string,
  type: 'isseckill' | 'issale' | 'isrecommend',
  state: 0 | 1
) => {
  const res = await updateFlag({ proid, type, state })

  ElMessage.success(res.data.message)
}

// 筛选
const filterHandler = (
  value: string,
  row: any,
  column: TableColumnCtx<Goods>
) => {
  const property = column['property']

  // property === 'category'

  return row[property] === value
}

getGoodsListData()
getCategoriesData()

/*****************商品详情展示***********************/
const dialogVisible = ref(false)
const goods = ref({} as Goods)
const preview = (row: Goods) => {
  goods.value = row
  goods.value.imageTextDesc =
    '<p><strong>商品简介：</strong></p><p><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/zl5W2N4MkKfUfL6StP8PHw.jpg" alt="" data-href="" style="width: 372.00px;height: 3340.55px;"/></p><p><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/MTAqo_3YK8fAw-zHHzLTxA.jpg" alt="" data-href="" style="width: 378.00px;height: 371.44px;"/></p><p>购买注意事项：<span style="color: rgb(225, 60, 57);"><strong>7天包退，请勿损毁</strong></span></p>'
  dialogVisible.value = true
}
</script>

<style scoped>
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.image-slot .el-icon {
  font-size: 30px;
}
</style>
